<template>
  <div>
    <Row>
      <Col :xs="24" :sm="24" :md="8" :lg="8">
      <div class="left">
        <ul>
        <li @click="counterweb=0" :class="{'active':counterweb === 0}">HOME |  <Icon type="md-person" /></li>
        <li @click="counterweb=1" :class="{'active':counterweb === 1}">RESUME | <Icon type="ios-paper" /></li>
        <li @click="counterweb=2" :class="{'active':counterweb === 2}">PORITFOLIO | <Icon type="ios-briefcase" /></li>
        <li @click="counterweb=3" :class="{'active':counterweb === 3}">CONTACT | <Icon type="ios-paper-plane" /></li>
      </ul>
      </div>
      </Col>
      
    </Row>
    <div class="right">
        <div class="content home" v-show="counterweb===0"><webhome></webhome></div>
        <div class="content resume" v-show="counterweb===1"><webinfo></webinfo></div>
        <div class="content proitfolio" v-show="counterweb===2"><webproject></webproject></div>
        <div class="content contact" v-show="counterweb===3"><webcontract></webcontract></div>
      </div>
  </div>
</template>

<script>
import webhome from '../components/webMyprofie'
import webinfo from '../components/webInfo'
import webproject from '../components/webProject'
import webcontract from '../components/webContract '
export default {
    data() {
        return {
           counterweb:0
        }
    },
    components:{
      webhome,
      webinfo,
      webproject,
      webcontract
    }
}
</script>

<style scoped>
.left{
  width: 100%;
  background-color: #f4d03f;
  padding: 15px 0px;
  text-align: right;
  margin-top: 20px;
}
.left li{
  transition: all 0.6s;
  font-size: 16px;
  cursor: pointer;
  padding: 12px 15px;
  border-bottom: 1px solid #e1c03a;
  word-spacing: 10px;
}
.left li.active{
  background-color: #111111;
  color: #f4d03f;
}
.left li:hover{
  transition: all 0.6s;
  background-color: #111111;
  color: #f4d03f;
}
.right{
width: 66.66666667%;
position: absolute;
right: 0;
top:30px;
padding-left: 15px;
}
</style>